<template>
  <div class="form-designer-box">
    <ex-form-designer style="flex: 1" :dark="dark" :form-name="formName" :form-id="formId" :form-data="formData"
      :form-json="formJson" />
  </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router';
import { onMounted, reactive, ref, toRefs } from 'vue';
import { cutNight, cutColor } from "./utils/theme";
// import { templateList } from "./constants/temp";

import { localStorageUtils } from "/@/components/fromDesigner/utils";
import { json } from 'stream/consumers';
let storage = localStorageUtils();
const route = useRoute();

const formData = ref({});
const formName = <any>ref(''); //表单名称
const formId = <any>ref(""); //表单id
const formJson = reactive({
  formConfig: <any>{},
  widgetList: <any>[]
}); //表单设计数据
const dark = ref(false);
const color = ref("#409eff");
const changDark = (value: boolean) => {
  cutNight(value);
};

const changColor = (value: string) => {
  if (value) {
    cutColor(value);
  } else {
    cutColor("#409EFF");
  }
};

const getRouteId = () => {
  let id = route.query.id
  if (id) {
    let paramsData = <any>route.query
    let form = JSON.parse(paramsData?.formData)
    console.log(form)
    formName.value = paramsData.name
    formId.value = id
    formJson.formConfig = form.formConfig
    formJson.widgetList=form.widgetList
  }
  console.log(formJson)

}
getRouteId()

onMounted(() => {
  let isNight = storage.get("ex-dark") as boolean;
  let themeColor = storage.get("ex-theme-color") as string;
  dark.value = isNight ?? false;
  color.value = themeColor ?? "#409EFF";
  changDark(dark.value);
  changColor(color.value);
});
</script>

<style lang="scss" scoped>
.form-designer-box {
  flex: 1;
  display: flex;
}
</style>